<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>统计信息展示</title>
  <!-- 引入 Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    /* 基本样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    .stats {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .stat-item {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
      width: calc(20% - 10px);
      box-sizing: border-box;
    }
    .chart-container {
      width: 100%;
      max-width: 600px;
      margin: 40px auto;
    }
    .trend-chart {
      width: 100%;
      height: 300px;
    }
    .member-status-chart {
      width: 100%;
      height: 300px;
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 统计信息展示 -->
  <div class="stats">
    <div class="stat-item" style="background-color: #e7f3ff;">
      <h3>1,648</h3>
      <p>今日派件量</p>
    </div>
    <div class="stat-item" style="background-color: #e2f0eb;">
      <h3>648</h3>
      <p>今日寄件量</p>
    </div>
    <div class="stat-item" style="background-color: #fcebeb;">
      <h3>￥164,800</h3>
      <p>今日寄件收入</p>
    </div>
    <div class="stat-item" style="background-color: #e8f5e9;">
      <h3>￥51,840</h3>
      <p>今日寄件收入</p>
    </div>
    <div class="stat-item" style="background-color: #fff3e0;">
      <h3>￥216,640</h3>
      <p>今日总收入</p>
    </div>
  </div>

  <!-- 派件量与寄件量趋势图 -->
  <div class="trend-chart">
    <canvas id="trendChart"></canvas>
  </div>

  <!-- 会员状态饼状图 -->
  <div class="member-status-chart">
    <canvas id="memberStatusChart"></canvas>
  </div>
</div>

<script>
  // 派件量与寄件量趋势图数据
  const trendChartData = {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    datasets: [{
      label: '派件量',
      data: [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1,
      fill: true
    }, {
      label: '寄件量',
      data: [28, 48, 40, 19, 86, 27, 90, 28, 48, 40, 19, 86],
      backgroundColor: 'rgba(153, 102, 255, 0.2)',
      borderColor: 'rgba(153, 102, 255, 1)',
      borderWidth: 1,
      fill: true
    }]
  };

  // 配置选项
  const trendChartConfig = {
    type: 'line',
    data: trendChartData,
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    },
  };

  // 渲染派件量与寄件量趋势图
  const trendCtx = document.getElementById('trendChart').getContext('2d');
  new Chart(trendCtx, trendChartConfig);

  // 会员状态饼状图数据
  const memberStatusData = {
    labels: ['普通会员', '快递员'],
    datasets: [{
      data: [91.41, 8.59],
      backgroundColor: ['#4caf50', '#2196f3'],
      hoverOffset: 4
    }]
  };

  // 配置选项
  const memberStatusConfig = {
    type: 'pie',
    data: memberStatusData,
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: '会员状态'
        }
      }
    },
  };

  // 渲染会员状态饼状图
  const memberStatusCtx = document.getElementById('memberStatusChart').getContext('2d');
  new Chart(memberStatusCtx, memberStatusConfig);
</script>
</body>
</html>
